<template>
  <div>
    <!-- title="选择门店POI" -->
    <a-modal :visible="visible" :bodyStyle="{
      padding: '20px 60px',
    }" :width="800" :footer="null" @cancel="cancelClick" destroyOnClose>
      <template #title>
        <a-space>
          <span class="main-title">选择门店POI</span>
          <!-- <span class="note">当前项目:  {{ M_name }}</span> -->
        </a-space>
      </template>


      <a-input v-model:value="searchName" placeholder="输入门店名称/POI 快捷筛选" allowClear />
      <div v-if="poiList.length">
        <div style="margin: 10px 0; display: flex; justify-content: space-between;">
          <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
            全选
          </a-checkbox>


          <a-button style="border-radius: 5px;" @click="addPOI">添加POI</a-button>
        </div>
        <a-checkbox-group v-model:value="checkedList">
          <a-row :gutter="[16, 16]" style="width: 100%">
            <a-col :span="8" v-for="item in poiList" :key="item.id">
              <a-checkbox :value="item.id">{{ item.store_name }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
      <div class="content" v-else>
        <div>
          <cu-icon class="icon" type="icon-sousuo" style="font-size: 30px" />
        </div>
        <div>请先尝试其他关键词或者POI</div>
        <div>或者 <span class="create_POI" @click="go_POI">创建新的POI</span> </div>
      </div>
      <div class="footer">
        <a-space>
          <a-button @click="cancelClick" type="primary" class="cancel">取消</a-button>
          <a-button type="primary" class="confirm" @click="confirmClick">确定</a-button>
        </a-space>
      </div>
    </a-modal>

        <!-- 添加POI -->
    <AddPOI :visible="visiblePOI" @onCancel="visiblePOI = false" @onSubmit="successPOI"  />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import request from "../../../../common/utils/request";
import { useRouter } from "vue-router";
import AddPOI from "@/views/shotstack/MaterialCenter/modules/AddPOI.vue";

export default defineComponent({
  name: "NewClip",
  components: {AddPOI},
  props: {
    M_name: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    poiId: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      searchName: "",
      poiList: [],
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      searchPoiList: [],
      visiblePOI: false,
    });
    const router = useRouter();

    const getPoiList = () => {
      request
        .get("/work_ai", "/user/shotstack/poi/list", {
          merchant_library_id: props.id,
        })
        .then((res) => {
          state.poiList = res.result;
          state.searchPoiList = res.result;
        });
    };

    watch(
      () => state.searchName,
      (val) => {
        if (val) {
          searchPoi(val);
        } else {
          state.poiList = state.searchPoiList;
        }
      }
    );

    const searchPoi = (text) => {
      state.poiList = state.poiList.filter((item, index) =>
        item.store_name.includes(text)
      );
    };

    const onCheckAllChange = (e) => {
      if (e.target.checked) {
        state.checkedList = state.poiList.map((item) => item.id);
      }
      Object.assign(state, {
        checkedList: e.target.checked ? state.checkedList : [],
        indeterminate: false,
      });
    };

    watch(
      () => state.checkedList,
      (val) => {
        if (val.length) {
          state.indeterminate = true;
          if (val.length == state.poiList.length) {
            state.checkAll = true;
            state.indeterminate = false;
          }
        } else {
          state.indeterminate = false;
          state.checkAll = false;
        }
      }
    );

    const confirmClick = () => {
      let list = [];
      state.poiList.forEach((item) => {
        state.checkedList.forEach((checked) => {
          if (item.id == checked) {
            list.push(item);
          }
        });
      });
      emit("onConfirm", list);
    };

    const cancelClick = () => {
      emit("onCancel");
    };

    // 去POI列表
    const go_POI = () => {
      router.push({ name: "PoiList" });
    }

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getPoiList();
          state.checkedList = props.poiId || [];
        }
      }
    );

    const addPOI = () => {
      state.visiblePOI = true
    }

    const successPOI = (data) => {
      state.visiblePOI = false;
      state.checked = false;
      state.indeterminate = true;
      getPoiList()
    }

    return {
      ...toRefs(state),
      cancelClick,
      confirmClick,
      onCheckAllChange,
      go_POI,
      AddPOI,
      successPOI,
      addPOI
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  text-align: center;
  padding: 20px;
  color: #c2c2c2;
}

.footer {
  text-align: right;
  padding-top: 10px;

  .cancel {
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e0e0e6;
    color: #000;
  }

  .confirm {
    border-radius: 5px;
    background: #2878FF;
    border: none;
  }
}

:deep(.ss-checkbox-group) {
  width: 100%;
}

.create_POI:hover {
  cursor: pointer;
  color: #3261fb;
  /* 当鼠标悬停时，字体颜色变为蓝色 */
}

.main-title {
  margin-right: 20px;
}
</style>
